<script lang="tsx">
/**
 * 菜单管理
 */
export default {
  name: "menu-setting"
}
</script>

<script lang="tsx" setup>
import {ref} from 'vue'
import {definePageTree, PageTree, dateTree, processRequest} from "@/framework"
import APIS from "@/apis"
import {ElMessage, ElMessageBox} from "element-plus"
import MenuForm from "./components/menu-form/index.vue"
import FieldForm from "./components/field-form/index.vue"
import ButtonForm from "./components/button-form/index.vue"

/**
 * 新增实例
 */
const menuFormRef = ref()
const fieldFormRef = ref()
const buttonFormRef = ref()

/**
 * 组件实例
 */
const treeRef = ref<any>()
const config = definePageTree<any>({
  url: APIS.MENU_BASE,
  getDataCallBack(data: any) {
    return dateTree(data)
  },
  searchForm: {
    els: [
      {
        label: "菜单名称",
        eType: "el-input",
        prop: "name",
        props: {
          placeholder: "请输入菜单名称",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增一级菜单",
        eType: "el-button",
        event: "add",
        props: {
          type: "primary"
        }
      }
    ]
  },
  tree: {
    props: {
      defaultExpand: true
    },
    event: {
      nodeDrop(draggingNode: any, dropNode: any, type: string) {
        handleNodeDrop(draggingNode, dropNode, type)
      }
    },
    prop: {
      children: "items",
      label: "name"
    },
    renderFn(data: any) {
      /**
       * 新增
       */
      const handleAdd = (event: MouseEvent) => {
        event.stopPropagation()
        menuFormRef.value.show({
          isEdit: false,
          superiorId: data.id
        })
      }

      /**
       * 字段配置
       */
      const handleField = (event: MouseEvent) => {
        event.stopPropagation()
        fieldFormRef.value.show({
          isEdit: false,
          menuId: data.id
        })
      }

      /**
       * 按钮配置
       */
      const handleButton = (event: MouseEvent) => {
        event.stopPropagation()
        buttonFormRef.value.show({
          isEdit: false,
          menuId: data.id
        })
      }

      /**
       * 编辑
       */
      const handleEdit = (event: MouseEvent) => {
        event.stopPropagation()
        menuFormRef.value.show({
          isEdit: true,
          data: data
        })
      }

      /**
       * 删除
       */
      const handleDelete = async (event: MouseEvent) => {
        event.stopPropagation()
        await ElMessageBox.confirm("是否确认删除该菜单", "删除", {
          type: "warning"
        })
        await processRequest.delete("/api/Menu", {
          id: data.id
        })
        ElMessage.success("删除成功")
        refreshTreeData()
      }

      return <div class="item">
        <div class="item-name">
          {data.name}
        </div>
        <div class="item-remark">
          {data.remark}
        </div>
        <div class="item-button">
          <el-button type="primary" link onClick={handleAdd}>新增子菜单</el-button>
          <el-button type="warning" link onClick={handleEdit}>编辑</el-button>
          <el-button type="danger" link onClick={handleDelete}>删除</el-button>
        </div>
      </div>
    }
  }
})

/**
 * 刷新
 */
const refreshTreeData = () => {
  treeRef.value.refreshTreeData()
}

/**
 * 新增一级菜单
 */
const handleAdd = () => {
  menuFormRef.value.show({
    isEdit: false
  })
}

/**
 * 拖动编辑
 */
const handleNodeDrop = async (draggingNode: any, dropNode: any, type: string) => {
  if (type == "inner") {
    await processRequest.put(APIS.MENU_BASE, {
      ...draggingNode.data,
      superiorId: dropNode.data.id
    })
  } else {
    await processRequest.put(APIS.MENU_BASE, {
      ...draggingNode.data,
      superiorId: dropNode.data.superiorId
    })
  }
  ElMessage.success("移动成功")
  refreshTreeData()
}
</script>

<template>
  <div class="menu-setting">
    <PageTree ref="treeRef" :config="config" @add="handleAdd"/>

    <!-- 新增/编辑菜单 -->
    <MenuForm ref="menuFormRef" @confirm="refreshTreeData"/>

    <!-- 字段配置 -->
    <FieldForm ref="fieldFormRef" @confirm="refreshTreeData"/>

    <!-- 按钮配置 -->
    <ButtonForm ref="buttonFormRef" @confirm="refreshTreeData"/>
  </div>

</template>

<style lang="scss" scoped>
.menu-setting {
  height: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep(.el-tree-node__content) {
  .item {
    width: 100%;
    display: flex;
    white-space: nowrap;

    .item-name {
      font-size: 16px;
      flex: 0;
    }

    .item-remark {
      margin-left: 12px;
      font-size: 12px;
      color: #aaaaaa;
      align-content: end;
      flex: 0;
      flex-basis: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-button {
      margin-left: 20px;
    }
  }
}
</style>